<template>
  <div class="bottom flex justify-center items-center">
    <div class="cancel" @click="cancel">取消</div>
    <span class="line"></span>
    <div class="confirm" @click="confirm">确认</div>
  </div>
</template>

<script>
export default {
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    confirm() {
      this.$emit("confirm");
    },
  },
};
</script>

<style lang="scss" scopde>
.bottom {
  width: 100%;
  height: calc(50px + env(safe-area-inset-bottom));
  background: #ffffff;
  box-shadow: 0px -1px 1px 0px #f5f5f5;
  font-family: PingFangSC-Medium, PingFang SC;
  font-size: 14px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;
  padding-top: 10px;
  padding-bottom: env(safe-area-inset-bottom);

  .cancel {
    flex-grow: 1;
    min-width: 28px;
    height: 30px;
    font-weight: 500;
    color: #666666;
    text-align: center;
  }
  .line {
    width: 1px;
    height: 20px;
    background: #f0f0f0;
  }
  .confirm {
    min-width: 28px;
    height: 30px;
    font-weight: 500;
    color: #1d6fe9;
    flex-grow: 1;
    text-align: center;
  }
}
</style>
